<template>
  <div>
    <div style="display: flex;justify-content: space-between">
      <dv-digital-flop :config="config1" style="width:200px;height:50px;border: 1px solid white"/>
      <dv-digital-flop :config="config2" style="width:200px;height:50px;border: 1px solid white"/>
      <dv-digital-flop :config="config3" style="width:200px;height:50px;border: 1px solid white"/>
    </div>
    <br>
    <div style="display: flex;justify-content: space-between">
      <dv-digital-flop :config="config4" style="width:200px;height:50px;border: 1px solid white"/>
      <dv-digital-flop :config="config5" style="width:200px;height:50px;border: 1px solid white"/>
      <dv-digital-flop :config="config6" style="width:200px;height:50px;border: 1px solid white"/>
    </div>
    <br>
    <div>
      <el-table border :header-cell-style="{ background: '#080f22', color: 'white'}"
                :cell-style="{ background: '#080f22', color: 'white', padding:'10px' }" v-loading="loading"
                :data="rankingData">
        <el-table-column label="编号" width="50" type="index" prop="index" align="center"/>
        <el-table-column label="设备" prop="equipmentName" align="center"/>
        <el-table-column label="生产数量" prop="productQuantity" align="center"/>
        <el-table-column label="碳排放" prop="totalCarbonEmission" align="center"/>
      </el-table>
    </div>
  </div>
</template>

<script>
import {currentGET} from "api";

export default {
  data() {
    return {
      config1: {
        number: [0],
        toFixed: 2,
        content: '今年累计销售额{nt}',
        style: {
          fontSize: 15,
          fill: '#3de7c9'
        }
      },
      config2: {
        number: [0],
        toFixed: 2,
        content: '本月累计销售额{nt}',
        style: {
          fontSize: 15,
          fill: '#3de7c9'
        }
      },
      config3: {
        number: [0],
        toFixed: 2,
        content: '今日累计销售额{nt}',
        style: {
          fontSize: 15,
          fill: '#3de7c9'
        }
      },
      config4: {
        number: [0],
        toFixed: 2,
        content: '今年累计碳排放{nt}',
        style: {
          fontSize: 15,
          fill: '#3de7c9'
        }
      },
      config5: {
        number: [0],
        toFixed: 2,
        content: '本月累计碳排放{nt}',
        style: {
          fontSize: 15,
          fill: '#3de7c9'
        }
      },
      config6: {
        number: [0],
        toFixed: 2,
        content: '今日累计碳排放{nt}',
        style: {
          fontSize: 15,
          fill: '#3de7c9'
        }
      },
      rankingData: [],
      loading: false
    }
  },
  methods: {
    init() {
      this.loading = true
      // 设备排放排行榜
      currentGET('big11').then(res => {
        this.loading = false
        const data = res.rows || []
        const index = data.length >= 8 ? 8 : data.length
        this.rankingData = data.slice(0, index)
      })
      // 销售额年月日统计
      currentGET('big12').then(res => {
        this.config1 = {
          ...this.config1,
          number: [res.data.yearTotal]
        }
        this.config2 = {
          ...this.config2,
          number: [res.data.monthTotal]
        }
        this.config3 = {
          ...this.config3,
          number: [res.data.todayTotal]
        }
      })
      // 碳排放年月日统计
      currentGET('big10').then(res => {
        let totalCarbonEmission = 0
        for (let row of res.rows) {
          totalCarbonEmission += row.totalCarbonEmission
        }
        this.config4 = {
          ...this.config4,
          number: [totalCarbonEmission]
        }
      })
      currentGET('big9').then(res => {
        let totalCarbonEmission = 0
        for (let row of res.rows) {
          totalCarbonEmission += row.totalCarbonEmission
        }
        this.config5 = {
          ...this.config5,
          number: [totalCarbonEmission]
        }
      })
      currentGET('big8').then(res => {
        let totalCarbonEmission = 0
        for (let row of res.rows) {
          totalCarbonEmission += row.totalCarbonEmission
        }
        this.config6 = {
          ...this.config6,
          number: [totalCarbonEmission]
        }
      })
    }
  },
  mounted() {
    this.init()
    setInterval(this.init, 5000)
  }
}
</script>

<style>

</style>
